<template>
  <template v-for="subItem in menuList" :key="subItem.path">
    <el-sub-menu v-if="subItem.children?.length" :index="getItemIndex(subItem)">
      <template #title>
        <el-icon>
          <component :is="subItem.meta?.icon || 'Menu'"></component>
        </el-icon>
        <span class="sle">{{ subItem.meta?.title || subItem.name }}</span>
      </template>
      <SubMenu :menuList="subItem.children" />
    </el-sub-menu>
    <el-menu-item
      v-else
      :index="getItemIndex(subItem)"
      @click="handleClickMenu(subItem)"
    >
      <el-icon>
        <component :is="subItem.meta?.icon || 'Menu'"></component>
      </el-icon>
      <template #title>
        <span class="sle">{{ subItem.meta?.title || subItem.name }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { buildMicroAppPath } from "@/config/microAppConfig";

const props = defineProps<{
  menuList: any[];
}>();

console.log('[SubMenu] 接收到的菜单数据:', props.menuList);

const router = useRouter();
const route = useRoute();

// 生成用于高亮匹配与点击的完整 index（与 default-active 完全一致）
const getItemIndex = (subItem: any) => {
  // 🔧 修复：父级菜单（有子菜单的）不应该被激活，只返回特殊标识
  if (subItem.children && subItem.children.length > 0) {
    // 父级菜单返回特殊标识，不会被匹配为激活状态
    return `parent-${subItem.path}`;
  }
  
  const result = buildMicroAppPath(subItem.path, subItem.servicePrefix);
  console.log('[SubMenu] getItemIndex:', {
    '原始路径': subItem.path,
    'servicePrefix': subItem.servicePrefix,
    '计算结果': result,
    '菜单名称': subItem.name || subItem.meta?.title,
    '是否有子菜单': !!(subItem.children && subItem.children.length > 0)
  });
  return result;
};

const handleClickMenu = (subItem: any) => {
  // 🔧 修复：父级菜单（有子菜单的）不应该被点击
  if (subItem.children && subItem.children.length > 0) {
    console.log('[SubMenu] 父级菜单不能点击:', subItem.name);
    return;
  }
  
  if (subItem.meta?.isLink) return window.open(subItem.meta.isLink, "_blank");
  
  // 根据 servicePrefix 自动构建完整路径
  const targetPath = buildMicroAppPath(subItem.path, subItem.servicePrefix);

  // 已经在当前路由则不再跳转，但允许 Element Plus 菜单状态正常更新
  if (route.path === targetPath) {
    console.log('[SubMenu] 已在当前路由，跳过跳转:', targetPath);
    return;
  }
  
  console.log('[SubMenu] 点击菜单:', subItem.name, '原始路径:', subItem.path, '目标路径:', targetPath);
  router.push(targetPath);
};
</script>

<script lang="ts">
export default {
  name: 'SubMenu'
};
</script>

<style lang="scss">
/* ========================================
   Ant Design Pro 标准菜单样式
   ======================================== */

/* 📌 菜单项样式（Ant Design 官方标准） */
.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 16px !important;
  margin: 4px 10px !important;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  color: var(--el-menu-text-color);
  background-color: transparent;
  font-size: 14px !important;
  user-select: none !important; // 禁止选中文字
  cursor: pointer;
  
  .el-icon {
    margin-right: 8px; // Ant Design Pro 标准
    font-size: 14px;
    color: var(--el-menu-icon-color);
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  
  &:hover {
    color: var(--el-menu-hover-text-color) !important;
    background-color: var(--el-menu-hover-bg-color) !important;
    
    .el-icon {
      color: var(--el-menu-icon-hover-color);
    }
  }
  
  &.is-active:not(.el-menu-item--disabled) {
    color: var(--el-menu-active-text-color) !important;
    background-color: var(--el-menu-active-bg-color) !important;
    font-weight: 500;
    
    .el-icon {
      color: var(--el-menu-icon-active-color) !important;
    }
    
    &::before {
      display: none !important;
    }
  }
}

/* 📌 子菜单标题样式（Ant Design 官方标准） */
.el-sub-menu__title {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 16px !important;
  margin: 4px 10px !important;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  color: var(--el-menu-text-color);
  background-color: transparent;
  font-size: 14px !important;
  font-weight: 400;
  user-select: none !important; // 禁止选中文字
  cursor: pointer;
  
  .el-icon {
    margin-right: 8px; // Ant Design Pro 标准
    font-size: 14px;
    color: var(--el-menu-icon-color);
  }
  
  &:hover {
    color: var(--el-menu-hover-text-color) !important;
    background-color: var(--el-menu-hover-bg-color) !important;
    
    .el-icon {
      color: var(--el-menu-icon-hover-color);
    }
  }
}

/* 🔧 强制父级菜单不显示激活样式（Ant Design 标准） */
.el-sub-menu > .el-sub-menu__title {
  color: var(--el-menu-text-color) !important;
  background-color: transparent !important;
  font-weight: 400 !important;
  
  &:hover {
    color: var(--el-menu-text-color) !important;
    background-color: var(--el-menu-hover-bg-color) !important;
  }
}

/* 确保父菜单激活和展开时也不变色 */
.el-sub-menu.is-active > .el-sub-menu__title,
.el-sub-menu.is-opened > .el-sub-menu__title {
  color: var(--el-menu-text-color) !important;
  background-color: transparent !important;
  font-weight: 400 !important;
  
  &:hover {
    color: var(--el-menu-text-color) !important;
    background-color: var(--el-menu-hover-bg-color) !important;
  }
}

/* 📌 子菜单内的菜单项（Ant Design 官方标准） */
.el-sub-menu .el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 16px 0 48px !important; // Ant Design Pro：子菜单项左边距 48px（比父菜单多 32px）
  margin: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  background-color: transparent !important; // 默认无背景
  user-select: none !important; // 禁止选中文字
  cursor: pointer;
  
  &:hover {
    background-color: var(--el-menu-hover-bg-color) !important; // 悬停时才显示灰色背景
  }
  
  &.is-active:not(.el-menu-item--disabled) {
    color: var(--el-menu-active-text-color) !important;
    background-color: var(--el-menu-active-bg-color) !important; // 选中时淡蓝色背景
    font-weight: 500;
    
    .el-icon {
      color: var(--el-menu-icon-active-color) !important;
    }
    
    &::before {
      display: none !important;
    }
  }
}

/* 🔧 更高优先级：强制子菜单项样式 */
.el-menu .el-sub-menu .el-menu-item {
  background-color: transparent !important; // 默认无背景
  padding-left: 48px !important; // 确保子菜单项有正确的缩进
  margin: 4px 10px !important;
  border-radius: 8px !important;
  
  &:hover {
    background-color: var(--el-menu-hover-bg-color) !important; // 悬停时显示背景
  }
}

.el-menu .el-sub-menu .el-menu-item.is-active {
  background-color: var(--el-menu-active-bg-color) !important; // 选中时淡蓝色
}

/* 📌 防止非激活菜单项错误显示激活样式（Ant Design 标准） */
.el-menu-item:not(.is-active) {
  color: var(--el-menu-text-color) !important;
  font-weight: 400 !important;
  /* 不设置 background-color，让默认样式生效 */
}

/* 📌 子菜单内的非激活项 - 保留浅灰色背景 */
.el-sub-menu .el-menu-item:not(.is-active) {
  color: var(--el-menu-text-color) !important;
  font-weight: 400 !important;
  /* background-color 由上面的规则定义，不在此覆盖 */
}

/* 📌 折叠状态样式 */
.el-menu--collapse {
  .el-sub-menu__title,
  .el-menu-item {
    padding: 0 20px !important; // 折叠时居中显示图标
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .el-sub-menu.is-active .el-sub-menu__title {
    color: var(--el-menu-text-color) !important;
    background-color: transparent !important;
  }
}

/* 📌 横向菜单特殊样式（Transverse 布局） */
.el-menu--horizontal {
  .el-menu-item,
  .el-sub-menu .el-sub-menu__title {
    height: 64px; // 横向菜单高度为 Header 高度
    line-height: 64px;
    margin: 0;
    padding: 0 24px; // Ant Design Pro 横向菜单边距
    border-radius: 0;
    
    &.is-active {
      color: var(--el-menu-active-text-color) !important;
      background-color: transparent !important;
      border-bottom: 3px solid var(--el-color-primary); // Ant Design Pro 激活指示线
      font-weight: 500;
    }
  }
}

/* 📌 垂直布局和经典布局的左侧指示线 */
.vertical,
.classic {
  .el-menu-item.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background-color: var(--el-color-primary);
    border-radius: 0 2px 2px 0;
    display: none; // 默认隐藏，使用背景色方案
  }
}

/* 📌 分栏布局的右侧指示线 */
.columns {
  .el-menu-item.is-active::before {
    content: '';
    position: absolute;
        right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background-color: var(--el-color-primary);
    border-radius: 2px 0 0 2px;
    display: none; // 默认隐藏，使用背景色方案
    }
  }

/* 📌 横向布局和经典布局的特殊处理 */
.classic,
.transverse {
  #driver-highlighted-element-stage {
    background-color: #606266 !important;
  }
}

/* 📌 文字溢出处理 */
.sle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
